<template>
  <div>
    <div class="header">
      <b-container>
        <b-row>
          <b-col cols="12" class="text-right">
            <router-link class="btn btn-sm btn-danger" to="/demo/">back</router-link>
          </b-col>
        </b-row>
      </b-container>
    </div>
    <div class="content my-2">
      <b-container>
        <b-row>
          <b-col cols="6">
            <b-card
              v-if="null != news"
              no-body
              class="mb-2"
            >
              <b-card-body>
                <b-card-title> {{news.title}} </b-card-title>
                <b-card-text>
                  {{news.description}}
                </b-card-text>
              </b-card-body>
              <b-card-footer class="text-right">
                {{date}}
              </b-card-footer>
            </b-card>
            <b-form-textarea
              v-model="comment"
              placeholder="Enter something..."
              rows="6"
              no-resize
              @keydown.enter.prevent="tryToCreateComment"
              :disabled="!isValidToSendBySocket"
            ></b-form-textarea>
          </b-col>
          <b-col cols="6" style="max-height: 400px; overflow: auto; overflow-x: hidden;">
            <b-list-group v-if="null != news">
              <b-list-group-item v-for="(comment, index) of validComments" :key="index">
                <b-spinner small label="Small Spinner" variant="info" v-if="comment.state == CommentState[0]"></b-spinner>
                {{comment.data}}
              </b-list-group-item>
            </b-list-group>
          </b-col>
        </b-row>
      </b-container>
    </div>
    
    
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'

// 需要与数据库enum保持一致，位于/service/Comment.js中
import { CommentState } from '../constants'

export default {
  props: {},
  data() {
    return {
      comment: ''
    };
  },
  computed: {
    ...mapState({
      news: 'viewingNews',
      socketId: 'socketId',
    }),
    ...mapGetters({
      isValidToSendBySocket: 'isValidToSendBySocket',
    }),
    validComments() {
      return null == this.news ? [] : this.news.comments.filter(function(comment) {
        return comment.state != CommentState[2];
      });
    },
    date: function() {
      return null == this.news ? '' : new Date(this.news.date).toLocaleString();
    },
    CommentState() {
      return CommentState
    },
  },
  created() {
    const vm = this;
    vm.$store.dispatch('obtainViewingNews', {
      data: vm.$route.params.newsId,
    });
  },
  beforeRouteUpdate(to, from, next) {
    const vm = this;
    vm.$store.dispatch('obtainViewingNews', {
      data: to.params.newsId,
    });
    next();
  },
  sockets: {
    appendComment(payload) {
      const vm = this;
      if (payload.socketId == vm.socketId) {
        vm.comment = '';
      }
    },
  },
  methods: {
    tryToCreateComment() {
      const vm = this;
      if (0 >= vm.comment.length) {
        return;
      }
      vm.$store.dispatch('createComment', {
        data: vm.comment
      });
      
    },
  },
}
</script>

<style scoped>

</style>